<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }
  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cell {
    background: #fff;
  }
  #acts span {
    font-size: 14px;
  }
  .halfbtn {
    display: inline-block;
    width: 49%;
  }
  .weui-label{
    /*width: 130px;*/
    text-align: left;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }
  *{
    list-style:none;
  }
  /*body{*/

  /*}*/
  .weui-cell_select {
    padding: 10px 15px;
  }
  .weui-cells__title {
    text-align: left;
  }
  .hide {
    display: none;
  }
  #acts {
    font-size: 0;
  }
  #acts span {
    font-size: 14px;
  }
  #unit:before {
    height: 0;
    border-top: 0;
  }
</style>
<template>
  <div class="oitem">
    <div class="weui-cells__title">货品明细{{itemNo + 1}}
      <p id="acts" style="float: right;color: #1aad19;" v-if="isLast">
        <span id="addItem" @click="addItem" style="padding-right: 5px;">添加</span>
        <span v-if="itemNo != 0">|</span>
        <span id="delItem" style="padding-left: 5px;" @click="delItem" v-if="itemNo != 0">删除</span>
      </p>
    </div>
    <div class="weui-cell weui-cell_select fir">
      <div class="weui-cell__hd"><label class="weui-label">类型</label></div>
      <div class="weui-cell__bd">
        <select class="weui-select" v-model="cate">
          <option value="">请选择货品类型</option>
          <option v-for="(item, index) in types" :value="item.dictkey" >{{item.dicttext}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd"><label class="weui-label">产品</label></div>
      <div class="weui-cell__bd">
        <input type="hidden" :name="'pitems[' + itemNo + '].productguid'" :value="currentProduct.guid">
        <input type="hidden" :name="'pitems[' + itemNo + '].productname'" :value="currentProduct.productname">
        <select class="weui-select product" v-model="currentProduct">
          <option value="" disabled>请选择</option>
          <option selected="" v-for="(item, index) in products" :key="item.guid" :value="item">{{item.productname}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__hd"><label class="weui-label">规格 </label></div>
      <div class="weui-cell__bd">
        <input type="hidden" ref="spname" :name="'pitems[' + itemNo + '].spname'" :value="spec.name">
        <input type="hidden" :name="'pitems[' + itemNo + '].rawspguid'" :value="spec.guid">
        <input type="hidden" :name="'pitems[' + itemNo + '].spguid'" :value="spec.guid">
        <select class="weui-select spec" ref="spec"  v-model="spec">
          <option selected="" v-for="(item, index) in specifications" :key="item.guid" :value="item">{{item.name}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">数量</label></div>
      <div class="weui-cell__bd" style="display: flex;">
        <input type="hidden"  :name="'pitems[' + itemNo + '].stockunit'" :value="unit.unitName" />
        <input type="hidden"  :name="'pitems[' + itemNo + '].stockunitid'" :value="unit.id" />
        <input class="weui-input count inlinput1" style="width: 50%;" type="number" :name="'pitems[' + itemNo + '].count'" placeholder="输入数量" />
<!--        <input class="weui-input inlinput2" type="text" readonly :value="spec.stockunit">-->
        <div class="weui-cell weui-cell_select inlinput2" id="unit" style="width: 45%;padding: 0;">
          <div class="weui-cell__bd">
            <select class="weui-select" v-model="unit">
              <option v-for="(item, index) in units" :value="item">{{item.unitName}}</option>
            </select>
          </div>
        </div>
<!--        <span style="display: inline-block; width: 25%;font-size: 10px;" @click="changeUnit">更换单位</span>-->
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">单价</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input price inlinput1" v-model="price"  type="number" :name="'pitems[' + itemNo + '].price'">
        <input class="weui-input inlinput2"  type="text" readonly :value="unit ? `元/${unit.unitName}` : ''">
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">备注</label></div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" :name="'pitems[' + itemNo + '].remark'" placeholder="请输备注内容" rows="2"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        openid: localStorage.openid,
        products: [],
        currentProduct: '',
        specifications: [],
        cate: '',
        houses: [],
        houseid: '',
        spec: '',
        showSpec: false,
        units: [],
        unit: '',
        price: ''
      }
    },
    props: [
      'itemNo',
      'isLast',
      'productCate',
      'types'
    ],
    computed: {

    },
    mounted() {
      // this.getProductinfo();
      // this.getSpecs();
    },
    watch: {
      'currentProduct.guid': function (val) {
        this.getSpecs();
      },
      // 'productCate': function (val) {
      //   this.getProducts();
      // },
      'cate': function () {
        this.getProducts();
        this.getSpecs();
      },
      'spec.guid': function (val) {
        this.getUnits(val);
      },
      unit: function () {
        this.price = '';
      }
    },
    methods: {
      addItem: function () {
        this.$emit('doAddItem');
      },
      delItem: function () {
        this.$emit('doDelItem');
      },
      getProducts: function () {
        let cate = this.cate;
        if (this.cate == 2) {
          cate = '2,5';
        }
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Sellform!findProductinfo.action',
          params: {productflag: cate}
        }).then(response => {
          if (response.data.status == "true") {
            this.products = response.data.result;
            console.log('products:', this.products)
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastText('获取货品数据失败')
          }
        });
      },
      getSpecs: function() {
        if (this.currentProduct == '') {
          return;
        }
        this.axios({
          method: 'get',
          url: '/produce/Whinapply!getSpeByproduct.action',
          params: {productid: this.currentProduct.guid, type: this.cate, stats: 1}
        }).then((response) => {
          if (response.data.msg == 'success') {
            this.specifications = response.data.specifications;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError("获取规格数据失败");
          }
        })
      },
      getUnits: function(id) {
        this.axios({
          method: 'get',
          url: '/sales/Salesspecification!getUnits.action',
          params: {speguid : id}
        }).then((response) => {
          if (response.data.msg == 'success') {
            this.units = response.data.units;
            this.unit = this.units.filter(item => {
              return item.type == 1;
            })[0];
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError("获取单位数据失败");
          }
        })
      }
    }
  }
</script>
